<template>
    <div>
        <el-row>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
                <el-breadcrumb-item>库存管理</el-breadcrumb-item>
                <el-breadcrumb-item>商品信息</el-breadcrumb-item>
            </el-breadcrumb>
        </el-row>
    </div>
    <el-row>
        <el-col :span="24">
            <el-form>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label-width="80px" label="商品名称">
                            <el-input></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label-width="80px" label="商品描述">
                            <el-input></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-button type="success">搜索</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </el-col>
    </el-row>

    <el-row>
        <el-button-group>
            <el-button type="success" @click="add">添加</el-button>


        </el-button-group>
        <el-table :data="products" fit>
            <el-table-column prop="product_name" label="商品名称">

            </el-table-column>

            <el-table-column prop="desc" label="描述">

            </el-table-column>

            <el-table-column>
                <template #default="scope">
                    <el-button type="warning" @click="edit(scope.row)">修改</el-button>
                    <el-button type="danger" @click="remove(scope.row.product_id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="example-pagination-block">
            <el-pagination layout="prev, pager, next" :total="50"/>
        </div>

    </el-row>

    <el-dialog v-model="dialog.isShow">

        <el-form>
            <el-form-item label="商品名称" label-width="180px">
                <el-input v-model="dialog.product.productName"></el-input>
            </el-form-item>
            <el-form-item label="商品描述" label-width="180px">
                <el-input v-model="dialog.product.desc"></el-input>
            </el-form-item>
        </el-form>

    </el-dialog>

</template>

<script>
    export default {
        name: "Product",
        data() {
            return {
                products: [],
                dialog: {
                    isShow: true,
                    product: {
                        productId: -1,
                        productName: '',
                        desc: ''
                    }
                }
            }

        },
        mounted() {
            this.axios({
                url: 'http://localhost:3000/product/findAll',
                method: 'get',
                dataType: 'json'
            }).then((res) => {
                console.log(res.data);
                this.products = res.data;
                console.log(this.products);
            })
        }, methods: {
            add() {
                this.axios({
                    url: 'http://localhost:3000/product/add',
                    method: 'post',
                    dataType: 'json',
                    data: this.dialog.product
                }).then((res) => {
                    if (res.data.flag) {
                        alert("添加成功！")
                    }
                })
            }, edit(row) {

                this.dialog.product.productId = row.product_id;

                this.axios({
                    url: 'http://localhost:3000/product/edit',
                    method: 'post',
                    dataType: 'json',
                    data: this.dialog.product
                }).then((res) => {
                    if (res.data.flag) {
                        alert("修改成功！")
                    }
                })
            },remove(productId){
                //略
            }
        }
    }
</script>

<style scoped>

    .el-row {
        margin-bottom: 20px;
    }

</style>
